<template>
  <div>
    <p>firstName: {{data.firstName}}</p>
    <p>lastName: {{data.lastName}}</p>
    <!-- <p>fullName: {{data.fullName}}</p> -->
    <input type="text" v-model="data.fullName">
  </div>
</template>

<script>
import { computed, reactive } from 'vue';

export default {
  setup () {
    const data = reactive({
      firstName: '吕',
      lastName: '布',
    })

    /* data.fullName = computed(() => {
      return data.firstName + '~' + data.lastName
    }) */

    // computed 也可以接收一个对象，好处是，能在 set 内部对计算属性进行修改
    data.fullName = computed({
      get() {
        return data.firstName + '~' + data.lastName
      },
      set(newValue) {
        const arr = newValue.split('~')
        data.firstName = arr[0]
        data.lastName = arr[1]
      }
    })

    return {
      data
    }
  }
}
</script>

<style lang="scss" scoped>

</style>